<template>
  <Dialog title="申请详情" v-model="dialogVisible" style="width: 60%" scroll :max-height="700">
    <ContentWrap class="status-bar">
      <div class="status-container">
        <div class="status-item">
          <el-icon :size="30" :color="getStatusColor(formData.status)"><Timer /></el-icon>
          <div :style="{ color: getStatusColor(formData.status) }">
            {{ getDictLabel(DICT_TYPE.JK_ORDER_STATUS, formData.status) }}
          </div>
        </div>
        <div class="info-item">
          <p class="info-label">申请编号</p>
          <div class="info-value">{{ formData.orderNo }}</div>
        </div>
        <div class="info-item">
          <p class="info-label">提交时间</p>
          <div class="info-value">{{ formatDate(formData.createTime) }}</div>
        </div>
        <div class="info-item">
          <p class="info-label">归还日期</p>
          <div class="info-value">{{ formatDate(formData.rebackTime, 'YYYY-MM-DD') }}</div>
        </div>
        <div v-if="formData.status === 0" class="reject-button-container">
          <el-button type="warning" @click="rejectDialogVisible = true">查看拒绝详情</el-button>
        </div>
        <div
          v-if="
            formData.status == 5 ||
            formData.status == 6 ||
            formData.status == 7 ||
            formData.status == 8
          "
          class="reject-button-container"
        >
          <el-button type="success" @click="downloadProductDetail" :icon="Download"
            >样本数据</el-button
          >
        </div>
      </div>
    </ContentWrap>

    <!-- 审批 -->
    <div
      v-if="
        formData.status == 1 ||
        formData.status == 2 ||
        formData.status == 5 ||
        formData.status == 7 ||
        formData.status == 4
      "
    >
      <div class="title">审批处理</div>
      <ContentWrap style="padding: 20px">
        <el-button
          v-hasRole="['order_admin']"
          v-if="formData.status == 1"
          type="primary"
          @click="statusHandler('reject')"
          >驳 回
        </el-button>

        <el-button
          v-hasRole="['order_expert']"
          v-if="formData.status == 2"
          type="primary"
          @click="statusHandler('reject')"
          >驳 回</el-button
        >
        <el-button v-if="formData.status == 4" type="primary" @click="statusHandler('err')"
          >驳 回</el-button
        >
        <el-button
          v-if="formData.status == 1"
          v-hasRole="['order_admin']"
          type="primary"
          @click="statusHandler('pass')"
          >通 过</el-button
        >
        <el-button
          v-if="formData.status == 2"
          type="primary"
          v-hasRole="['order_expert']"
          @click="openExpertReviewDialog"
          >通 过</el-button
        >
        <el-button v-if="formData.status == 4" type="primary" @click="statusHandler('pass')"
          >通 过</el-button
        >
        <el-button v-if="formData.status == 5" type="primary" @click="statusHandler('out')"
          >确认出库</el-button
        >
        <el-button v-if="formData.status == 7" type="primary" @click="statusHandler('in')"
          >确认归还</el-button
        >
      </ContentWrap>
    </div>

    <div v-if="formData.status > 2">
      <div class="section-title">专家审批意见</div>
      <ContentWrap class="info-section">
        <div class="info-row">
          <p class="info-label">科学价值：</p>
          <p class="info-value">{{ formData.scientificValue || '--' }}</p>
        </div>
        <div class="info-row">
          <p class="info-label">数据安全方案：</p>
          <p class="info-value">{{ formData.dataSecurity || '--' }}</p>
        </div>
        <div class="info-row">
          <p class="info-label" style="width: 160px">是否符合队列建设目标：</p>
          <p class="info-value">
            {{ formData.targetOk == 0 ? '是' : formData.targetOk == 1 ? '否' : '--' }}
          </p>
        </div>
      </ContentWrap>
    </div>

    <!-- 审批协议 -->
    <div v-if="formData.dataAgreement">
      <div class="section-title">审批协议</div>
      <ContentWrap class="info-section">
        <div class="info-value file-list-container">
          <div class="file-item">
            <p class="file-name">
              <span style="color: #999">数据使用协议：</span>
              <span style="margin-left: 20px">{{
                getFileNameFromUrl(formData?.dataAgreement)
              }}</span></p
            >

            <el-button
              type="text"
              size="small"
              @click="handleFileDownload(formData.dataAgreement)"
              class="download-btn"
            >
              下载
            </el-button>
          </div>
          <div class="file-item">
            <p class="file-name">
              <span style="color: #999">知识产权协议：</span>
              <span style="margin-left: 20px">{{
                getFileNameFromUrl(formData?.knowledgeAgreement)
              }}</span>
            </p>
            <el-button
              type="text"
              size="small"
              @click="handleFileDownload(formData.knowledgeAgreement)"
              class="download-btn"
            >
              下载
            </el-button>
          </div>
          <div class="file-item">
            <p class="file-name">
              <span style="color: #999">数据安全责任书：</span>
              <span style="margin-left: 20px">{{
                getFileNameFromUrl(formData?.dataSecurityAgreement)
              }}</span>
            </p>
            <el-button
              type="text"
              size="small"
              @click="handleFileDownload(formData.dataSecurityAgreement)"
              class="download-btn"
            >
              下载
            </el-button>
          </div>
        </div>
      </ContentWrap>
    </div>

    <!-- 样本领取地址 -->
    <div class="section-title">样本领取地址</div>
    <ContentWrap class="info-section">
      <div class="info-row">
        <p class="info-label">实验室联系人：</p>
        <p class="info-value">{{ formData.addressData?.contactName }}</p>
      </div>
      <div class="info-row">
        <p class="info-label">联系方式：</p>
        <p class="info-value">{{ formData.addressData?.contactPhone }}</p>
      </div>
      <div class="info-row">
        <p class="info-label">样本领取地址：</p>
        <p class="info-value">{{ formData.addressData?.address }}</p>
      </div>
    </ContentWrap>

    <!-- 数据使用申请表信息 -->
    <div class="section-title">数据使用申请表信息</div>
    <ContentWrap class="info-section">
      <div class="info-row">
        <p class="info-label"> 研究背景与目的：</p>
        <div
          class="info-value"
          style="
            height: 100px;
            overflow: auto;
            margin-bottom: 10px;
            border: 1px solid #dedede;
            padding: 2px;
            border-radius: 3px;
          "
          >{{ formData.applyBackground }}</div
        >
      </div>
      <div class="info-row">
        <p class="info-label">详细分析计划：</p>
        <div
          class="info-value"
          style="
            height: 300px;
            overflow: auto;
            margin-bottom: 10px;
            border: 1px solid #dedede;
            padding: 2px;
            border-radius: 3px;
          "
          v-html="formData.applyPlan"
        ></div>
      </div>
      <!-- 所需变量清单（修改后：显示所有文件） -->
      <div class="info-row">
        <p class="info-label">所需变量清单：</p>
        <div class="info-value file-list-container">
          <div v-if="!processedFileUrls.length" class="no-file-tip">暂无相关文件</div>
          <!-- 循环所有文件，每行一个 -->
          <div class="file-item" v-for="(file, index) in processedFileUrls" :key="index">
            <span class="file-name">{{ file.fileName }}</span>
            <el-button
              type="text"
              size="small"
              @click="handleFileDownload(file.url)"
              class="download-btn"
            >
              下载
            </el-button>
          </div>
        </div>
      </div>
      <div class="info-row">
        <p class="info-label">伦理审查证明：</p>
        <el-image
          :src="formData.applyProof || ''"
          fit="fill"
          style="
            width: 220px;
            height: 150px;
            margin-top: 10px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #dedede;
            border-radius: 3px;
          "
          :preview-src-list="formData.applyProof ? [formData.applyProof] : []"
        />
      </div>
    </ContentWrap>

    <!-- 样本信息 -->
    <div class="section-title">样本信息</div>
    <ContentWrap class="info-section">
      <div class="sample-header">
        <p class="sample-header-item">基本信息</p>
      </div>
      <div class="sample-content">
        <div class="sample-info">
          <div class="sample-image" @click="imagePreview(formData?.productData?.picture)">
            <img :src="formData?.productData?.picture" alt="" style="width: 150px; height: 100px" />
            <div class="sample-tag">{{ formData.productData?.typeName }}</div>
          </div>
          <div class="sample-details">
            <p class="sample-name">{{ formData.productData?.name }}</p>
            <p class="sample-meta">分类：{{ formData.productData?.typeName }}</p>
            <p class="sample-meta"
              >采样时间：{{ formatDate(formData.productData?.createTime, 'YYYY-MM-DD') }}</p
            >
          </div>
        </div>
      </div>
    </ContentWrap>

    <!-- 申请信息 -->
    <div class="section-title">申请信息</div>
    <ContentWrap class="info-section">
      <div class="info-row">
        <p class="info-label">申请编号：</p>
        <p class="info-value">{{ formData.orderNo }}</p>
      </div>
      <div class="info-row">
        <p class="info-label">提交时间：</p>
        <p class="info-value">{{ formatDate(formData.createTime) }}</p>
      </div>
    </ContentWrap>

    <div class="summary-section">
      <div class="summary-row">
        <p class="summary-label">申请样本数量：</p>
        <p class="summary-value">{{ formData.applyNum }}</p>
      </div>
      <div class="summary-row">
        <p class="summary-label">样本规格：</p>
        <p class="summary-value">{{ selectedProductSizeName }}</p>
      </div>
      <div class="summary-row">
        <p class="summary-label">样本领取时间：</p>
        <p class="summary-value">{{ formatDate(formData.receiveTime, 'YYYY-MM-DD') }}</p>
      </div>
      <div class="summary-row">
        <p class="summary-label">样本归还时间：</p>
        <p class="summary-value">{{ formatDate(formData.rebackTime, 'YYYY-MM-DD') }}</p>
      </div>
      <div class="summary-row">
        <p class="summary-label">领取方式：</p>
        <p class="summary-value">{{ formData.receiveType }}</p>
      </div>
    </div>

    <ContentWrap class="additional-info">
      <p>真实姓名 {{ formData.realName }}</p>
      <p>{{ formData.address }}</p>
    </ContentWrap>

    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>

  <!-- 审批框 -->
  <Dialog title="确认提示" v-model="reviewDialogVisible" :close-on-click-modal="false" width="500">
    <div v-if="statusType == 'reject'">
      <el-form-item label="审批意见" prop="opinion">
        <el-input
          type="textarea"
          v-model="reviewOpinion"
          placeholder="请输入审批意见..."
          maxlength="300"
          show-word-limit
          :rows="4"
        />
      </el-form-item>
    </div>
    <div v-else style="display: flex">
      <div>
        <el-icon :size="40" color="#fc9110"><Warning /></el-icon>
      </div>
      <div style="margin-left: 10px">
        <p>是否确认此操作</p>
        <p style="color: #999">继续请点击确定按钮</p>
      </div>
    </div>
    <template #footer>
      <el-button @click="reviewDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="updateHandler" :disabled="updateLoading">确定</el-button>
    </template>
  </Dialog>

  <!-- 专家审批意见 -->
  <Dialog
    title="专家审核意见"
    v-model="expertReviewDialogVisible"
    :close-on-click-modal="false"
    width="800"
  >
    <el-form
      ref="expertReviewFormRef"
      :model="expertReviewForm"
      label-width="160px"
      :rules="expertReviewRules"
    >
      <el-form-item label="科学价值" prop="scientificValue">
        <el-input
          type="textarea"
          v-model="expertReviewForm.scientificValue"
          placeholder="请输入科学价值..."
          maxlength="500"
          show-word-limit
          :rows="4"
        />
      </el-form-item>
      <el-form-item label="数据安全方案" prop="dataSecurity">
        <el-input
          type="textarea"
          v-model="expertReviewForm.dataSecurity"
          placeholder="请输入数据安全方案..."
          maxlength="500"
          show-word-limit
          :rows="4"
        />
      </el-form-item>
      <el-form-item label="是否符合队列建设目标" prop="targetOk">
        <el-checkbox v-model="istargetOk" @change="handletargetOkChange">
          符合队列建设目标
        </el-checkbox>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="expertReviewDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitExpertReview">确定</el-button>
    </template>
  </Dialog>

  <!-- 拒绝详情弹窗 -->
  <Dialog title="拒绝详情" v-model="rejectDialogVisible" :close-on-click-modal="false">
    <div class="reject-detail-content">
      <div class="reject-icon">
        <el-icon :size="60" color="#f56c6c"><CircleClose /></el-icon>
      </div>
      <div class="reject-status">已拒绝</div>
      <div class="reject-reason">
        <p>拒绝内容：{{ formData.rejectWords || '暂无拒绝原因' }}</p>
        <p>你可再次联系工作人员重新修改资料，进行重新提单操作</p>
      </div>
    </div>
    <template #footer>
      <el-button @click="rejectDialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { getIntDictOptions, getDictLabel, DICT_TYPE } from '@/utils/dict'
import { JkOrderApi, JkOrderVO } from '@/api/jikong/jkOrder'
import { Timer, CircleClose, Warning, Download } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/formatTime'
import { createImageViewer } from '@/components/ImageViewer'
import { JkSizeApi, JkSizeVO } from '@/api/jikong/size'
/** 申请 表单 */
defineOptions({ name: 'JkOrderForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const rejectDialogVisible = ref(false) // 控制拒绝详情弹窗的显示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref<JkOrderVO>({})

/** 根据状态渲染颜色 */
const colorList = reactive([
  { value: 0, color: '#DA1E28' },
  { value: 1, color: '#F1C21B' },
  { value: 2, color: '#F1C21B' },
  { value: 3, color: '#F1C21B' },
  { value: 4, color: '#F1C21B' },
  { value: 5, color: '#F1C21B' },
  { value: 6, color: '#25A249' },
  { value: 7, color: '#F1C21B' },
  { value: 8, color: '#25A249' },
  { value: 9, color: '#DA1E28' },
  { value: 100, color: '#DDE1E6' }
])

/** 获取状态对应的颜色 */
const getStatusColor = (status: number) => {
  const colorItem = colorList.find((item) => item.value === status)
  return colorItem ? colorItem.color : '#555555'
}

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  getSizeList()
  dialogTitle.value = t('action.' + type)
  formType.value = type
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await JkOrderApi.getJkOrder(id)
    } finally {
      formLoading.value = false
    }
  }
}

/** 获取规格 */
const sizeList = ref()
const getSizeList = async () => {
  try {
    const res = await JkSizeApi.getJkSizeList()
    sizeList.value = res.list
  } catch (error) {}
}
const selectedProductSizeName = computed(() => {
  const selectedId = formData.value.productSize
  if (!selectedId || !sizeList.value.length) {
    return '-'
  }
  const matchedItem = sizeList.value.find((item) => item.id === selectedId)
  return matchedItem ? matchedItem.name : '-'
})

/** 单据审批 */
const statusType = ref('') // 审批状态
const reviewDialogVisible = ref(false) // 审批框
const reviewOpinion = ref(undefined) // 驳回意见
const statusHandler = (type: string) => {
  statusType.value = type
  reviewDialogVisible.value = true
}

// 专家审核相关变量
const expertReviewDialogVisible = ref(false)
// 核心调整：targetOk 0=是，1=否；初始值为1（默认否）
const expertReviewForm = reactive({
  scientificValue: '',
  dataSecurity: '',
  targetOk: 1 // 0=是，1=否
})
// 复选框绑定的中间变量（解决0/1与布尔值的转换）
const istargetOk = ref(false)
const expertReviewFormRef = ref()

// 处理复选框状态变化：选中→0（是），未选中→1（否）
const handletargetOkChange = (checked: boolean) => {
  expertReviewForm.targetOk = checked ? 0 : 1
}

// 专家审核表单验证规则：仅在提交时验证，确保至少填写一项
const expertReviewRules = {
  scientificValue: [
    {
      validator: (rule: any, value: string, callback: any) => {
        const hasValue =
          value.trim() || expertReviewForm.dataSecurity.trim() || expertReviewForm.targetOk === 0
        if (!hasValue) {
          message.warning('科学价值、数据安全方案、是否符合队列建设目标至少填写一项')
          callback(new Error('验证不通过'))
        } else {
          callback()
        }
      },
      trigger: ['submit'] // 仅在提交时验证
    }
  ],
  dataSecurity: [
    {
      validator: (rule: any, value: string, callback: any) => {
        const hasValue =
          value.trim() || expertReviewForm.scientificValue.trim() || expertReviewForm.targetOk === 0
        if (!hasValue) {
          message.warning('科学价值、数据安全方案、是否符合队列建设目标至少填写一项')
          callback(new Error('验证不通过'))
        } else {
          callback()
        }
      },
      trigger: ['submit'] // 仅在提交时验证
    }
  ],
  targetOk: [
    {
      validator: (rule: any, value: number, callback: any) => {
        const hasValue =
          expertReviewForm.scientificValue.trim() ||
          expertReviewForm.dataSecurity.trim() ||
          value === 0
        if (!hasValue) {
          message.warning('科学价值、数据安全方案、是否符合队列建设目标至少填写一项')
          callback(new Error('验证不通过'))
        } else {
          callback()
        }
      },
      trigger: ['submit'] // 仅在提交时验证
    }
  ]
}

// 打开专家审核对话框
const openExpertReviewDialog = () => {
  // 重置表单
  expertReviewForm.scientificValue = ''
  expertReviewForm.dataSecurity = ''
  expertReviewForm.targetOk = 1 // 重置为默认值1（否）
  istargetOk.value = false // 复选框重置为未选中
  expertReviewDialogVisible.value = true
}

// 提交专家审核意见
const submitExpertReview = async () => {
  // 表单验证
  if (!expertReviewFormRef.value) return
  const valid = await expertReviewFormRef.value.validate()
  if (!valid) return

  try {
    await JkOrderApi.updateStatus({
      id: formData.value.id,
      status: 3,
      scientificValue: expertReviewForm.scientificValue,
      dataSecurity: expertReviewForm.dataSecurity,
      targetOk: expertReviewForm.targetOk // 直接提交0或1
    })
    message.success(t('common.updateSuccess'))
    formData.value = await JkOrderApi.getJkOrder(formData.value.id)
    expertReviewDialogVisible.value = false
    emit('success')
  } catch (error) {
    console.error('提交专家审核意见失败', error)
  }
}
/** 修改单据状态 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const updateLoading = ref(false)
const updateHandler = async () => {
  updateLoading.value = true
  const status =
    statusType.value == 'reject'
      ? 0
      : statusType.value == 'err'
      ? 9
      : statusType.value == 'pass'
      ? formData.value.status + 1
      : statusType.value == 'out'
      ? 6
      : 8
  try {
    await JkOrderApi.updateStatus({
      id: formData.value.id,
      status: status,
      rejectWords: statusType.value == 'reject' ? reviewOpinion.value : undefined
    })
    message.success(t('common.updateSuccess'))
    formData.value = await JkOrderApi.getJkOrder(formData.value.id)
    reviewDialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    updateLoading.value = false
  }
}

/** 预览图片 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl],
    zIndex: 4000, // 动态传入更高层级，确保覆盖所有弹窗
    hideOnClickModal: true // 可选：点击遮罩关闭预览，优化体验
  })
}

/**
 * 从URL中提取文件名（截取最后一个"/"后的内容）
 * @param {string} url - 后端返回的文件URL
 * @returns {string} 提取的文件名，无URL时返回"--"
 */
const getFileNameFromUrl = (url) => {
  if (!url || typeof url !== 'string') return '--'
  // 分割URL，取最后一个"/"后的内容作为文件名
  const fileName = url.split('/').pop()
  // 处理特殊情况（如URL以"/"结尾时返回空，此时显示"未知文件"）
  return fileName || '未知文件'
}

/** 处理所需变量清单的文件列表（核心修改：保留所有URL） */
const processedFileUrls = computed(() => {
  if (!formData.value.applyList) return []
  // 分割逗号分隔的URL，处理成 {url: '完整路径', fileName: '文件名'} 格式
  return formData.value.applyList
    .split(',')
    .map((url) => url.trim()) // 去除前后空格
    .filter((url) => url) // 过滤空字符串（防止逗号连续导致的空项）
    .map((url) => ({
      url: url,
      // 从URL中提取文件名（如 "小额零星类采购明细导入模板_1760880361755.xls"）
      fileName: url.split('/').pop() || '未知文件.xls'
    }))
})

/** 处理文件下载（通用逻辑，适配所有文件） */
const handleFileDownload = (fileUrl: string) => {
  // 从URL提取文件名作为下载后的文件名
  const fileName = fileUrl.split('/').pop() || '下载文件.xls'
  // 创建临时a标签触发下载
  const link = document.createElement('a')
  link.href = fileUrl
  link.download = fileName // 指定下载文件名
  link.target = '_blank' // 避免浏览器拦截
  document.body.appendChild(link)
  link.click() // 模拟点击下载
  document.body.removeChild(link) // 清理临时标签
}

const downloadProductDetail = () => {
  const fileUrl = formData.value?.productData?.productData
  if (!fileUrl) {
    message.warning('文件不存在')
    return
  }
  // 提取文件名（复用现有工具函数）
  const fileName = getFileNameFromUrl(fileUrl) || '样本详情文件'
  // 创建a标签下载
  const link = document.createElement('a')
  link.href = fileUrl
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss" scoped>
// 状态栏样式
.status-bar {
  background-color: #f9f9f9;
}

.status-container {
  display: flex;
  align-items: center;
  padding: 20px;
}

.status-item {
  text-align: center;
  margin-right: 60px;
}

.info-item {
  text-align: center;
  margin-right: 60px;

  .info-label {
    color: #999;
    line-height: 30px;
    margin: 0;
  }

  .info-value {
    margin: 0;
  }
}

// 通用样式
.section-title {
  margin: 5px 0;
  font-weight: 500;
}

.info-section {
  margin-bottom: 15px;
}

.info-row {
  line-height: 30px;
  display: flex;
  margin-bottom: 5px;

  .info-label {
    color: #999;
    margin: 0;
    width: 120px;
  }

  .info-value {
    margin: 0;
    flex: 1;
  }
}

// 所需变量清单 - 文件列表样式
.file-list-container {
  border: 1px solid #dedede;
  padding: 2px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 8px; // 每行文件间距
  padding: 4px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 12px; // 文件名和按钮间距
  line-height: 24px;
}

.file-name {
  flex: 1; // 文件名占满剩余空间，防止按钮换行
  color: #333;
  word-break: break-all; // 长文件名自动换行
}

.download-btn {
  color: #409eff; // 按钮蓝色（ElementPlus主色）
  padding: 2px 8px;
}

.no-file-tip {
  color: #999;
  line-height: 24px;
}

// 样本信息样式
.sample-header {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #eee;
  padding: 10px;

  .sample-header-item {
    margin: 0;
    flex: 1;
    text-align: center;

    &:first-child {
      text-align: left;
    }
  }
}

.sample-content {
  display: flex;
  padding: 10px;
  justify-content: space-around;
  align-items: center;
}

.sample-info {
  display: flex;
  flex: 1;
}

.sample-image {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
.sample-tag {
  position: absolute;
  background: #525252;
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  top: 0;
  left: 0;
}

.sample-details {
  line-height: 25px;
}

.sample-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.sample-meta {
  color: #999;
  margin: 0 0 5px 0;
}

// 汇总信息样式
.summary-section {
  float: right;
  margin-bottom: 10px;

  .summary-row {
    display: flex;
    margin-bottom: 5px;

    .summary-label {
      width: 120px;
      text-align: right;
      margin: 0;
    }

    .summary-value {
      width: 120px;
      color: #ed4448;
      text-align: right;
      margin: 0;
    }
  }
}

// 附加信息样式
.additional-info {
  width: 100%;
  background-color: #f9f9f9;
  clear: both;
  padding: 10px;

  p {
    margin: 5px 0;
  }
}

// 拒绝详情按钮样式
.reject-button-container {
  float: right;
  margin: 10px 0;
}

// 拒绝详情弹窗内容样式
.reject-detail-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  text-align: center;

  .reject-icon {
    margin-bottom: 16px;
  }

  .reject-status {
    font-size: 20px;
    color: #f56c6c;
    margin-bottom: 12px;
  }

  .reject-reason {
    line-height: 1.6;
    color: #606266;
    max-width: 400px;

    p {
      margin: 8px 0;
    }
  }
}
</style>